<template>
	<notice :notice.sync="notice"></notice>
	<header-class action="grade"></header-class>
	
	<div class="loading-class" v-if="loading">
		<i class="fa fa-spinner fa-spin fa-3x"></i>
	</div>
	<div class="container" id="grade-container">
		<div class="row">
			<div class="col-md-2 col-md-offset-1">
				<a :href="'/export/exportAllGrade?cad='+claId" class="btn btn-info" v-on:click="exportGrades">导出成绩表</a>
			</div> 
			<div class="col-md-2 col-md-offset-6">
				<div class="input-group input-group search-group input-group-sm">
					<input type="text" class="form-control" placeholder="学号 、姓名" 
							v-model="searchContent" 
							debounce='500' 
							@keyup.enter="searchByStu">
	                <span class="input-group-btn">
	                    <button class="btn btn-default" type="button" @click="searchByStu">
							<span class="glyphicon glyphicon-search"></span>
						</button>
	                </span>
				</div>
			</div>
		</div>
		<div class="row" v-if="!loading">
			<div class="col-md-10 col-md-offset-1">
				<div class="panel panel-default grade-panel" v-if="students.length>0||quizs.length>0">
					<div class="panel-heading">
						<ul class="row">
							<li class="col-xs-2 panel-title grade-item">学号</li>
							<li class="col-xs-1 panel-title grade-item">姓名</li>
							<li class="col-xs-9 panel-titles">
								<a href="javascript:;" class="go-pre" @click="goPre" v-show="front > 0"><span class="glyphicon glyphicon-chevron-left"></span></a>
								<ul class="row">
									<template v-for="quiz in quizs">
										<li class="col-xs-2" v-if="$index >= front && $index <= end">
											<div :title="quiz.qus_name" class="grade-item">{{ quiz.qus_name }}</div>
											<div class="text-muted grade-item quiz-time">{{ quiz.qus_create_time.substring(5, 10) }}</div>
										</li>
									</template>
								</ul>
								<a href="javascript:;" class="go-next" @click="goNext" v-show="end < quizs.length-1"><span class="glyphicon glyphicon-chevron-right"></span></a>
							</li>
	
						</ul>
					</div>
					<div class="panel-body">
						<ul class="row score-row" v-for="student in students">
							<li class="col-xs-2 grade-item" :title="student.stu_number">{{ student.stu_number }}</li>
							<li class="col-xs-1 grade-item" :title="student.stu_name">{{ student.stu_name }}</li>
							<li class="col-xs-9 panel-quiz-score score-li">
								<ul class="row">
									<template v-for="score in student.allResult">
										<li class="col-xs-2"  v-if="$index >= front && $index <= end">
											<div class="grade-item text-danger" v-if="score.stu_score === '未交'">{{ score.stu_score }}</div>
											<div class="grade-item" v-else>
												<a :href="'/TestPaper/review.html?qd='+quizs[$index].qus_id+'&sd='+student.stu_id" class="text-success" target="_blank">
													{{ score.stu_score }}
												</a>
											</div>
										</li>
									</template>
								</ul>
							</li>
						</ul>
					</div>
				</div>
				<div class="display-hint" v-else>
                    <p>暂无测试成绩记录 (该班级没有学生或您未发布测试)</p>
                </div>
			</div>
		</div>
	    <div class="row" v-if="!loading">
	            <div class="col-md-3 col-md-offset-5">
	                <pagenation v-if="pageInfo.page>1"
	                			:page-info="pageInfo"
	                			@update-np="updatePage">
	                </pagenation>
	            </div>
	    </div>
	</div>
</template>

<script>
	import HeaderClass from '../../Component/HeaderClass/HeaderClass';
	import Pagenation from '../../Component/Pagenation/Pagenation';
	import Notice from '../../Component/Notice/Notice';

	export default {
		created: function() {
			this.claId = location.search.substring(1).split("=")[1];
			this.getGrades();
		},
		data() {
			return {
				claId: -1,
				notice: {type: 0, msg: ""},
				loading: false,
				searchContent: "",
				quizs: [],
				students: [],
				pageInfo: {},
				front: 0,
				end: 5,
			}
		},
		components: {
			HeaderClass,
			Pagenation,
			Notice
		},
		methods: {
			getGrades: function(np) {
				this.loading = true;
				this.$http.post('/stuResult/getAllGrades', {cla_id: this.claId, np: np}).then(function(resp) {
					this.loading = false;
					if (resp.data.status === 1) {
						this.quizs = resp.data.data.quiz;
						this.students = resp.data.data.student;
						this.pageInfo = resp.data.data.pageInfo;
						this.front = 0;
						this.end = 5;
					} else {
						this.notice = {type: 0, msg: resp.data.message};
					}
				}, function(resp) {
					// error callback
			        this.notice = {type: 0, msg: resp.statusText};
			        this.loading = false;
				})
			},
			updatePage: function(np) {
				if (np == this.pageInfo.np)
					return
				this.getGrades(np);
			},
			searchByStu: function() {
				if (!this.searchContent) {
					this.notice = {type: 0, msg: '请输入内容'};
					return;
				}
				this.loading = true;
				this.$http.post('/stuResult/searchStuGrade', {cla_id: this.claId, key: this.searchContent}).then(function(resp) {
					this.loading = false;
					if (resp.data.status === 1) {
						this.quizs = resp.data.data.quiz;
						this.students = resp.data.data.student;
						this.pageInfo = resp.data.data.pageInfo;
						this.front = 0;
						this.end = 5;
					} else {
						this.notice = {type: 0, msg: resp.data.message};
					}
				}, function(resp) {
					// error callback
			        this.notice = {type: 0, msg: resp.statusText};
			        this.loading = false;
				})
			},
			exportGrades:function(){
				//window.open("__MODULE__/ExportExcel/exportAllGrades?cad="+cla_id);
			},
			goPre: function() {
				if (this.front > 0) {
					this.front--;
					this.end--;
				}
				$(".row .col-xs-9").hide().fadeIn("slow");
			},
			goNext: function() {
				if (this.end < this.quizs.length-1) {
					this.front++;
					this.end++;
				}
				$(".row .col-xs-9").hide().fadeIn("slow");
			}
		},
		watch: {
			searchContent: function() {
				if (this.searchContent === '') {
					console.log(123)
					this.getGrades();
				}
			}
		}
	}
</script>

<style>
	.search-group {
		margin: 5px 0 15px;
	}

	.grade-panel ul {
		list-style-type:none;
		margin: 0;
		padding : 0;
	}

	.grade-panel .panel-heading {
		min-height: 64px;
	}

	.grade-panel .grade-item {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		text-align: center;
	}

	.row .col-xs-2,
	.row .col-xs-1,
	.row .col-xs-8 {
		padding-left: 10px;
		padding-right: 10px;
	}

	.quiz-time {
		font-size: 12px;
	}

	.panel-title {
		margin-top: 10px;
	}

	.panel-titles {
		margin-top: 5px;
	}

	.panel-body {
		padding: 0 0 0 0;
		min-height: 372px;
	}

	.panel-body .score-row {
		border-bottom: 1px solid #e8e8e8;
		padding: 20px 15px;
	}

	.go-pre {
		margin-top: 10px;
		position: absolute;
		left: 10px;
		z-index: 99;
		color: #606060;
	}

	.go-next {
		margin-top: 10px;
		position: absolute;
		top: 0;
		right: 10px;
		z-index: 99;
		color: #606060;
	}
</style>